/**
 * 绘制.
 */

//绘制棋盘
function drawCheckerboard() {
    zr.clear();
    var count = 15;

    for (let i = 0; i < count; i++) {
        for (let j = 0; j < count; j++) {
            var point = new PointItem();
            point.x = j * rectW;
            point.y = i *  rectH;

            point.xNum = j;
            point.yNum = i;

            pointList.appendLine(point, i);

            var circle = new zrender.Rect({
                shape: {
                    x: point.x,
                    y: point.y,
                    width: rectW,
                    height: rectH
                },
                style: {
                    fill: '#f8e8b7',
                    stroke: '#bca47a'
                },
                extendInfo : {
                    nodeInfo : point
                }
            });

            //最后一列和最后一排隐藏
            if((j === count - 1) || (i == count - 1)) {
                circle.hide();
            }

            //绑定事件
            circle.on('click', function (even) {
                clickPoint(even);
            });

            zr.add(circle);
        }
    }
}

//绘制预选中效果
function drawBeforehandSelect(nodeInfo) {
    if(preClick.circle) {
        preClick.circle.attr({
            shape: {
                cx: nodeInfo.x,
                cy: nodeInfo.y
            },
            extendInfo : {
                nodeInfo : nodeInfo
            }
        });
        preClick.circle.show();

    } else {
        //绘图
        preClick.circle = new zrender.Circle({
            shape: {
                cx: nodeInfo.x,
                cy: nodeInfo.y,
                r: 8,
            },
            style: {
                fill: 'null',  //填充样式。
                stroke: 'null',     //描边样式
                shadowBlur: 1,    //阴影
                lineDash : [ 5, 5],
                lineWidth:1     //线宽
            },
            extendInfo : {
                nodeInfo : nodeInfo
            }
        });

        //绑定事件
        preClick.circle.on('click', function (even) {
            preClick.circle.hide();
            fallPiece(even.target.extendInfo.nodeInfo);
        });

        //动画
        preClick.circle.animate('shape', true)
            .when(1000, {rotation : 300})
            .when(1000, {r : 10})
            .start();

        zr.add(preClick.circle);
    }

    preClick.point = nodeInfo;
}

/**
 * 绘制棋子.
 * @param ops { x:x坐标, y:坐标, power:true自己，false敌人  }
 */
function drawPiece(ops) {
    return new zrender.Circle({
        shape: {
            cx: ops.x,
            cy: ops.y,
            r: 8,
        },
        style: {
            fill: ops.power ? '#fff' : '#000',  //填充样式。
            stroke: 'null',     //描边样式
        }
    });
}

/**
 * 绘制赢了动画.
 * @param path LinePath
 */
function drawVictoryAnimate(path) {
    var nodeList = path.pathNodeList;

    for (let j = 0; j < nodeList.length; j++) {
        for (let k = 0; k < fallPieceStack.length; k++) {
            var tmpPoint = fallPieceStack[k].node;
            if (tmpPoint.data.xNum === nodeList[j].data.xNum && tmpPoint.data.yNum === nodeList[j].data.yNum) {
                var pointCircle = fallPieceStack[k].circle;

                //动画
                pointCircle.animate('shape', true)
                    // .when(1000, {rotation: 300})
                    .when(1000, {r: 10})
                    .when(1000, {r: 6})
                    .start();
            }
        }
    }

    //是否显示步骤
    if(isStep) {
        for (let i = 0; i < fallPieceStack.length; i++) {
            var item = fallPieceStack[i];
            var nodeData = item.node.data;

            var circle = item.circle;
            circle.attr({
                style :{
                    text : (i + 1),
                    textAlign: 'center',
                    textVerticalAlign: 'middle',
                    fontWeight: 'bolder',
                    textFill: nodeData.piece ? '#000000FF' : '#fff',
                }
            });
        }
    }
}